<template>
	<view style="width: 100%; padding-right: 70rpx">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item
				:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
				left-icon="account"
				label-width="120"
				label="姓名"
				prop="name"
			>
				<u-input
					:border="border"
					placeholder="请输入姓名"
					v-model="model.name"
					type="text"
				></u-input>
			</u-form-item>
			<u-form-item
				:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
				label-width="150"
				label="身份证号"
				prop="identityCard"
			>
				<u-input
					:border="border"
					placeholder="请输入身份证号"
					v-model="model.identityCard"
					type="text"
				></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<u-input
					:border="border"
					type="select"
					:select-open="actionSheetShow"
					v-model="model.sex"
					disabled
					placeholder="请选择性别"
				></u-input>
			</u-form-item>
			<u-form-item
				:rightIconStyle="{ color: '#888', fontSize: '32rpx' }"
				right-icon="kefu-ermai"
				label="手机号码"
				prop="phone"
				label-width="150"
			>
				<u-input
					:border="border"
					placeholder="请输入手机号"
					v-model="model.phone"
					type="number"
				></u-input>
			</u-form-item>
			<!-- <u-form-item label="所在地区" prop="region" label-width="150">
				<u-input
					:border="border"
					type="select"
					:select-open="pickerShow"
					v-model="model.region"
					placeholder="请选择地区"
					@click="pickerShow = true"
				></u-input>
			</u-form-item> -->
			<!-- <u-form-item
				:leftIconStyle="{ color: '#888', fontSize: '32rpx' }"
				label-width="150"
				label="详细地址"
			>
				<u-input
					:border="border"
					placeholder="请输入详细地址"
					v-model="model.site"
					type="text"
				></u-input>
			</u-form-item> -->
			<u-form-item label-width="150" label="婚姻状态" prop="maritalStatus">
				<u-input
					:border="border"
					type="select"
					:select-open="actionSheetShow"
					v-model="model.maritalStatus"
					placeholder=" "
					@click="maritalSheetShow = true"
				></u-input>
			</u-form-item>
		</u-form>
		<view class="agreement">
			<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
			<view class="agreement-text"> 确认信息无误 </view>
		</view>
		<u-button @click="submit">确认</u-button>
		<u-action-sheet
			:list="actionSheetList"
			v-model="actionSheetShow"
			@click="actionSheetCallback"
		></u-action-sheet>
		<u-action-sheet
			:list="maritalStatus"
			v-model="maritalSheetShow"
			@click="SheetShow"
		></u-action-sheet>
		<u-select
			mode="mutil-column-auto"
			v-model="pickerShow"
			:list="addressList"
			@confirm="regionConfirm"
		></u-select>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { findHisCard } from '../../http/api'
export default {
	data() {
		return {
			model: {
				name: '',
				sex: '',
				phone: '',
				region: '',
				site: '',
				identityCard: '',
				maritalStatus: '',
			},
			notarize: false,
			check: false,
			actionSheetShow: false,
			maritalSheetShow: false,
			pickerShow: false,
			actionSheetList: [
				{
					// 1
					text: '男',
				},
				{
					// 2
					text: '女',
				},
			],
			maritalStatus: [
				{
					// 1
					text: '未婚',
				},
				{
					// 2
					text: '已婚',
				},
			],
			// 地址
			addressList: [
				{
					value: 1,
					label: '广东',
					children: [
						{
							value: 2,
							label: '广州',
							children: [
								{
									value: 3,
									label: '白云区',
								},
							],
						},
						{
							value: 4,
							label: '深圳',
							children: [
								{
									value: 5,
									label: '莆田',
								},
							],
						},
					],
				},
				{
					value: 6,
					label: '陕西',
					children: [
						{
							value: 7,
							label: '西安',
							children: [
								{
									value: 8,
									label: '雁塔',
								},
								{
									value: 10,
									label: '高新',
								},
							],
						},
					],
				},
			],
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
					},
				],
				sex: [
					{
						required: true,
						message: '请选择性别',
						trigger: 'change',
					},
				],
				maritalStatus: [
					{
						required: true,
						message: '请选择婚姻状态',
						trigger: 'change',
					},
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur'],
					},
					{
						pattern:
							/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
						message: '目前只支持中国大陆的手机号码',
						trigger: ['change', 'blur'],
					},
				],
				identityCard: [
					{
						required: true,
						message: '请输入身份证号码',
						trigger: ['change', 'blur'],
					},
					{
						validator: (rule, value, callback) => {
							let val = this.$u.test.idCard(value)
							// return
							if (val) {
								this.model.sex = this.getsex(value) == 0 ? '女' : '男'
							}
							return val
						},
						message: '请输入正确的身份证号',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					},
					// {
					// 	pattern:
					// 		/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
					// 	message: '请输入正确的身份证号',
					// 	trigger: ['change', 'blur'],
					// },
				],
				region: [
					{
						required: true,
						message: '请选择地区',
						trigger: 'change',
					},
				],
			},
			errorType: ['message'],
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		getsex(idCard) {
			let order = idCard.length == 18 ? idCard.slice(-2, -1) : idCard.slice(-1)
			return order % 2 === 0 ? 0 : 1
		},
		// 性别
		actionSheetCallback(index) {
			this.model.sex = this.actionSheetList[index].text
		},
		//婚姻状态
		SheetShow(index) {
			this.model.maritalStatus = this.maritalStatus[index].text
		},
		// 选择地区回调
		regionConfirm(e) {
			console.log(e, '1')
			this.model.region = e[0].label + '-' + e[1].label + '-' + e[2].label
		},
		// 勾选确认
		checkboxChange(e) {
			console.log(e)
			this.notarize = e.value
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if (!this.notarize) return this.$u.toast('请勾选协议')
					// 姓名
					// patientName
					// 性别
					// patientGender
					// 身份证
					// patientIdcode
					// 婚姻
					// patientMarriage
					// 电话
					// patientTelephone
					let canshu = {
						userId: this.$store.state.userId,
						orgId: this.$store.state.orgId,
						patientName: this.model.name,
						patientGender: this.model.sex == '男' ? '1' : '2',
						patientIdcode: this.model.identityCard,
						patientMarriage: this.model.identityCard == '已婚' ? '1' : '2',
						patientTelephone: this.model.phone,
					}
					// debugger
					findHisCard(canshu).then(({ head }) => {
						console.log(head, '2132132131')
						if (head.code == 200) {
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
								isTab: true,
								url: 'pages/index/index',
							})
						} else {
							this.$refs.uToast.show({
								title: head.msg,
								type: 'error',
								isTab: true,
							})
							return
						}
					})
					console.log('验证通过')
				} else {
					console.log('验证失败')
				}
			})
		},
	},
}
</script>

<style lang="scss">
page {
	padding: 10rpx 40rpx;
}
.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;

	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
</style>